<template>
  <div class="detail">
    <div class="left">
      <h3>{{ subjectInfo.subjectName }}</h3>
      <div class="score">
        <el-rate
          v-model="subjectInfo.aveScore"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}分"
        >
        </el-rate>
      </div>
    </div>
    <div class="right">
      <div class="subject">
        <h5>课程简介</h5>
        {{ subjectInfo.subjectInfo }}
      </div>
      <div class="teacher">
        <h5>教师简介</h5>
        {{ subjectInfo.teacherInfo }}
      </div>
      <div class="ass">
        <el-table
          :data="tabelData"
          style="width: 100%"
          :row-style="{ height: '50px' }"
          stripe
          height="250"
        >
          <el-table-column prop="assTime" label="时间" width="110" sortable>
          </el-table-column>
          <el-table-column prop="username" label="用户" width="110">
          </el-table-column>
          <el-table-column prop="star" label="评分" width="100" sortable> </el-table-column>
          <el-table-column
            prop="assInfo"
            label="评价"
            show-overflow-tooltip="hidden"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="addAss">
        <el-form ref="assForm" :model="assForm" :rules="rules">
          <el-form-item prop="star">
            <el-rate v-model="assForm.star"></el-rate>
          </el-form-item>

          <el-form-item label="评价" prop="assInfo">
            <el-input type="textarea" v-model="assForm.assInfo"></el-input>
          </el-form-item>
          <el-button type="primary" @click="onSubmit">发表</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      subjectInfo: null,
      tabelData: null,
      assForm: {
        subjectId: this.$route.params.id,
        assInfo: '',
        star: 0
      },
      rules: {
        assInfo: [
          { required: true, message: '评价不能为空', trigger: 'blur' },
          { min: 6, max: 100, message: '长度在6到100个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.getSubjectInfo()
    this.getAssInfo()
  },
  methods: {
    getSubjectInfo () {
      this.$http({
        methods: 'get',
        url: 'subject/findId',
        params: {
          id: this.$route.params.id
        },
        headers: {
          token: window.localStorage.getItem('token')
        }
      }).then((res) => {
        if (res.data.code === 5) {
          this.$message.error('登录信息有误')
          this.$router.push('/login')
        } else if (res.data.code === 0) {
          this.subjectInfo = res.data.data
        } else {
          this.$message.error('id不存在')
        }
      })
    },
    getAssInfo () {
      this.$http({
        method: 'get',
        url: 'subject/ass',
        params: {
          subjectId: this.$route.params.id
        },
        headers: {
          token: window.localStorage.getItem('token')
        }
      }).then((res) => {
        if (res.data.code === 5) {
          this.$message.error('登录信息有误')
          this.$router.push('/login')
        } else if (res.data.code === 0) {
          this.tabelData = res.data.data
        } else {
          this.$message.error('id不存在')
        }
      })
    },
    onSubmit () {
      if (this.assForm.star === 0) {
        this.$message.error('请进行评分')
      } else {
        this.$refs.assForm.validate(async (valid) => {
          if (valid) {
            const { data: res } = await this.$http({
              method: 'post',
              url: 'subject/addAss',
              data: this.assForm,
              headers: {
                token: window.localStorage.getItem('token')
              }
            })
            if (res.code === 0) {
              this.$message.success('评价成功')
            } else if (res.code === 5) {
              this.$message.error('登录信息有误')
              this.$router.push('/login')
            } else if (res.code === 2) {
              this.$message.error('你已经评价过了')
            } else {
              this.$message.error('评价失败')
            }
          }
        })
      }
    }
  }
}
</script>

<style long="less" scoped>
h3{
    margin: 10px;
}
.detail {
  height: 100%;
  /* background-image: url(../assets/background.svg); */
  /* background-repeat: no-repeat; */
}
.left {
  list-style-type: none;
  width: 15%;
  height: 100%;
  position: fixed;
  margin: 0;
}
.right {
  list-style-type: none;
  margin-left: 15%;
  margin-top: 20px;
  border-left: 1px solid black;
}
.addAss {
  border: 1px solid rgb(118, 118, 121);
  margin: 10px;
  padding: 10px;
  width: 95%;
  display: inline-block;
  height: 200px;
}
.ass {
  border: 1px solid rgb(118, 118, 121);
  margin: 10px;
  padding: 10px;
  width: 95%;
  display: inline-block;
}
.subject {
  display: inline-block;
  margin-left: 10px;
  height: 100px;
  width: 45%;
  font-size: 10px;
}
.teacher {
  border-left: 1px solid black;
  margin-left: 10px;
  padding-left: 20px;
  height: 100px;
  display: inline-block;
  width: 45%;
  font-size: 10px;
}
</style>
